<template>
  <el-dialog title="加油记录" :visible.sync="dialogVisible" :before-close="cancelFn" width="840px">
    <el-form ref="memberRef" :inline="true" :model="searchForm" label-position="right" label-width="80px">
      <el-form-item label="开始时间:">
        <el-date-picker v-model="searchForm.startTime" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss" :picker-options="dateStartPickerOptions" default-time="00:00:00">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间:">
        <el-date-picker v-model="searchForm.endTime" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss" :picker-options="dateEndPickerOptions" default-time="23:59:59">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="">
        <el-button size="small" @click="getList">查询</el-button>
        <!-- <el-button type="primary" size="small" icon="el-icon-download" @click="handleExport"
            :disabled="total<=0">导出报表</el-button> -->
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="枪号" align="center" prop="gunNo" />
      <el-table-column label="油品" align="center" prop="prName" />
      <el-table-column label="单价" align="center" prop="price" />
      <el-table-column label="升数" align="center" prop="vol" />
      <el-table-column label="金额" align="center" prop="fuelAmt" />
      <el-table-column label="实收金额" align="center" prop="realAmt" />
      <el-table-column label="优惠金额" align="center" prop="discAmt" />
      <el-table-column label="加油时间" align="center" prop="startTime" width="155" />
      <!-- <el-table-column label="支付状态" align="center" prop="paidStatus">
          <template slot-scope="scope">
            {{scope.row.paidStatus > 0 ? '已支付' : '待确定'}}
          </template>
        </el-table-column> -->
      <el-table-column label="支付方式" align="center">
        <template slot-scope="scope">
          {{scope.row.paidStatus > 0 ? scope.row.paidName : '---'}}
        </template>
      </el-table-column>
      <!-- <el-table-column label="支付时间" align="center" prop="paidTime" /> -->
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
      @pagination="getList" />
  </el-dialog>
</template>

<script>
  import {
    fuelOrder
  } from "@/api/fleet";
  export default {
    name: 'fuelRecords',
    data() {
      return {
        searchForm: {},
        loading: true,
        dialogVisible: false,
        list: [],
        searchForm: {
          pageSize: 10,
          pageNum: 1
        },
        total: 0,
        dateStartPickerOptions: {
          // 限制不可选择之前的日期
          disabledDate: (time) => {
            if (this.searchForm.endTime) {
              return (
                time.getTime() > new Date(this.searchForm.endTime).getTime() - 8.64e7
              );
            } else {
              return (time.getTime() > Date.now())
            }
          }
        },
        dateEndPickerOptions: {
          disabledDate: (time) => {
            if (this.searchForm.startTime) {
              return (time.getTime() < new Date(this.searchForm.startTime).getTime() || time.getTime() > Date.now());
            } else {
              return (time.getTime() > Date.now())
            }
          }
        },
      }
    },
    created(){
      let range = this.timeForRange(-7)
      this.searchForm.startTime = range[0]
      this.searchForm.endTime = range[1]
    },
    methods: {
      open(row) {
        console.log('fuelRecords', row)
        if (row) {
          if (row.memberId > 0) {
            this.searchForm.memberId = row.memberId;
          } else if (row.companyId > 0) {
            this.searchForm.companyId = row.companyId
          } else {
            this.$message.error('参数错误');
            return
          }
          this.getList()
          this.$nextTick(() => {
            this.dialogVisible = true;
          })
        }
      },
      getList() {
        try {
          this.loading = true;
          fuelOrder({
            ...this.searchForm
          }).then(res => {
            if (res.code === 200) {
              this.list = res.data.rows;
              this.total = parseInt(res.data.total);
              this.loading = false
              console.log(this.total)
            }
          })
        } catch (error) {
          this.loading = false;
        }
      },
      handleExport() {
        this.download('/trade/fuelOrder/export', {
          ...this.searchForm
        }, `加油订单_${new Date().getTime()}.xlsx`)
      },
      cancelFn() {
        this.searchForm = {
          pageNum: 1,
          pageSize: 10
        }
        this.dialogVisible = false;
      },
    }
  }
</script>

<style>

</style>
